<template>
  <div v-title="'Banner管理 - 世外生活运营平台'">
      <mk-breadcrumb  :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="MkBannerMgt PublicListStyle">
        <div class='searchDiv marginBottom-20'>
          <el-cascader
          :props="options"
          :options="siteArr"
          v-model="siteSelect"
          placeholder="请选择站点"
          @change="changeCondition">
        </el-cascader>
        <el-select v-model="searchCondition.position" placeholder="请选择站点" @change="changeCondition">
          <el-option value="" label="全部"></el-option>
          <el-option v-for="item in positionData" :key="item.value" :value="item.value" :label="item.name"></el-option>
        </el-select>
          <!--<mk-permission :perms="['swxc:property:publish:banner:create']">-->
            <el-button type='primary' class='btn-create floatRight' @click='addBanner'>添加Banner</el-button>
          <!--</mk-permission>-->
        </div>

        <div class='tabContainer gray_bg'   v-loading="loadingTab"
             element-loading-text="拼命加载中">
            <el-table
              :data="bannerData.elements"
              style="width: 100%"
              >
              <el-table-column
                prop="sort"
                label="排序"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="title"
                label="标题"
              >
              </el-table-column>
              <el-table-column
                prop="site"
                label="所属站点"
              >
              </el-table-column>
              <el-table-column
                prop="position"
                label="展示位置"
              >
                <template slot-scope='scope'>
                  {{scope.row.position | position}}
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                label="图片">
                <template slot-scope='scope' >
                  <div class="imageContainer"  @click="showImage(scope.row.image.accessUrl)">
                    <img :src="scope.row.image.accessUrl" alt=""/>
                  </div>
                  <!--<a href="#" >点击查看</a>-->
                </template>
              </el-table-column>
              <el-table-column
                prop="link"
                label="进入页面" show-overflow-tooltip>
                <template slot-scope='scope'>
                  <a :href="scope.row.link" target="_blank">{{ scope.row.link }}</a>
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                label=""
                width='225'>
                <template slot-scope='scope'>
                  <!--<mk-permission :perms="['swxc:property:publish:banner:update']">-->
                    <i class='el-icon-edit operationIconStyle ' @click='editBanner(scope.row)' style="font-size:16px;"></i>

                    <template v-if="scope.row.status == 'Published'">
                      <i class='mk-icon-undo  operationIconStyle' @click='revokeBanner(scope.row.id)' style="font-size:16px;"></i>
                    </template>
                  <template v-else>
                    <i class='mk-icon-loop  operationIconStyle' aria-hidden="true"  @click='publishBanner(scope.row.id)'style="font-size:16px;" ></i>
                  </template>
                  <!--</mk-permission>-->
                  <!--<mk-permission :perms="['swxc:property:publish:banner:delete']">-->
                    <i class='el-icon-delete operationIconStyle ' @click='deleteBanner(scope.row.id)' style="font-size:16px;"></i>
                  <!--</mk-permission>-->
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-if='bannerData.elements.length>0'
              @current-change="handleCurrentChange"
              :current-page="bannerData.page"
              :page-size="bannerData.size"
              layout="total, prev, pager, next"
              :total="bannerData.totalAmount">
            </el-pagination>
        </div>
      </div>
    </el-scrollbar>
      <!--  添加Banner -->
      <mk-add-banner :showDialog='dialogVisible_add'  v-on:closeDialog='closeDialog_add' :bannerInfo="currentBannerInfo"></mk-add-banner>

      <!--预览图片-->
      <el-dialog :visible.sync="imageDialogVisible"  custom-class="show-image-dialog" top="0%">
        <img :src="imageViewUrl" alt=""/>
      </el-dialog>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
  import MkAddBanner from './MkAddBanner.vue'
  import bannerService from '../../services/banner'
  import { mapState } from 'vuex'
  export default {
    name: 'MkBannerMgt',
    components: {
      MkBreadcrumb, MkAddBanner
    },
    filters: {
      position(value) {
        switch(value) {
          case 'SWSH_HOME_01': return '首页位置1';
          case 'SWSH_HOME_02': return '首页位置2';
          case 'SWSH_MARKET_01': return '商城位置1';
          case 'SWSH_RECOMMEND_01': return '首页推荐1';
          case 'SWSH_RECOMMEND_02': return '首页推荐2';
          case 'SWSH_RECOMMEND_03': return '首页推荐3';
          case 'SWSH_RECOMMEND_04': return '首页推荐4';
          case 'SWSH_HOUSEKEEPER_01': return '铂金管家1';
          case 'SWSH_TOHOMESERVICES_01': return '到家服务1';
          case 'SWSH_HOUSERENTAL_01': return '房屋租售1';
          default: return '';
        }
      }
    },
    computed: mapState({
      bodyHeight: state=> state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      siteArr: state => {
        let arr = [];
        let data = state.site.siteTree;
        arr.push({id:'',name:'全部'});
        if(data.children){
          for(var i=0;i<data.children.length;i++) {
            let item = data.children[i];
            if(item.children && item.children.length>0) {
              arr.push(item);
            }
          }
        }
       return arr;
      },
      positionData: state => state.banner.positionSelect,
    }),
    methods : {
      showImage(src) {
        this.imageDialogVisible = true;
        this.imageViewUrl = src;
      },
      addBanner() {
        this.currentBannerInfo = null;
        this.dialogVisible_add = true;
      },
      searchByCondition() {
        this.loadingTab=true;
        bannerService.loadBannerMgtServer(this.searchCondition, (data)=>{
          this.bannerData = data.data;
          this.loadingTab=false;
        })
      },
      handleCurrentChange(value) {
          this.searchCondition['page.pn'] = value;
          this.searchByCondition();
      },
      closeDialog_add(isRefresh) {
        this.dialogVisible_add=false;
        if(isRefresh){
          this.searchByCondition();
        }
      },
      editBanner(obj) {
        this.currentBannerInfo = obj;
        this.dialogVisible_add = true;
      },
      revokeBanner(value) {
        var that=this;
        this.$confirm('撤回后该内容将不会对外显示，确定要撤回吗？', '撤回', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'confirmBox_warning'
        }).then(() => {
          bannerService.revokeBannerServer(value, function(data) {
            that.$message({
              type: 'success',
              message: '撤回成功'
            });
            that.searchByCondition();
          });
        }).catch(() => {
        });
      },
      publishBanner(value) {
        var that=this;
        bannerService.publishBannerServer(value, function(data) {
          that.$message({
            type: 'success',
            message: '发布成功'
          });
          that.searchByCondition();
        });
      },
      deleteBanner(value) {
        var that=this;
        this.$confirm('删除该内容后将不能恢复，确定要删除吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'confirmBox_warning'
        }).then(() => {
          bannerService.deleteBannerServer({id : value}, function(data) {
            that.$message.success( '删除成功');
            that.searchByCondition();
          });
        }).catch(() => {
        });
      },
      loadSite() {
        this.$store.dispatch('loadSiteTree',{fields:'id,name'});
      },
      changeCondition() {
        this.searchCondition['page.pn'] = 1;
        this.searchCondition.siteId = this.siteSelect[this.siteSelect.length-1];
        this.searchByCondition();
      },
      loadPositionData() {
          this.$store.dispatch('loadPositionSelect');
      }
    },
    mounted: function() {
      this.loadSite();
      this.loadPositionData();
      this.searchByCondition();
    },
    activated(){
      this.searchByCondition();
    },
    data() {
      return {
        siteSelect: [''],
        options: {
          value: 'id',
          label:'name',
          children: 'children'
        },
        imageDialogVisible: false,
        imageViewUrl: '',
        loadingTab: false,
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          fields: 'id,sort,title,siteIds,site,position,image,link,status,linkKey,bannerType',
          siteId: '',
          position: '',
        },
        breadcrumbData: {
          list: [{
              name: '运营',
              path: null,
              isClickAble: false
            },
           {
              name: 'Banner管理',
              path: null,
              isClickAble: false
            },
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'operation-icon',
        },
        dialogVisible_add: false,
        currentBannerInfo : null,
        bannerData: {
          page: '',
          size: '',
          totalAmount: '',
          totalPages: '',
          elements: []
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import '../../assets/style/main.less';
  .MkBannerMgt {
    .searchDiv{
      .el-cascader{
        width:360px;
        height:46px;
        .el-cascader__label{
          line-height: 46px;
        }
        .el-input{
          .el-input__inner{
            background-color: #fff;
            height:46px;

          }
        }
      }
      .el-select{
        margin-left:20px;
        width:360px;
        height:46px;
        .el-cascader__label{
          line-height: 46px;
        }
        .el-input{
          .el-input__inner{
            background-color: #fff;
            height:46px;

          }
        }
      }

    }
    .imageContainer{
      .showImageInFixedContainer(60px,50px);
      margin:5px 0;
      cursor: pointer;
    }
    .el-table a {
      text-decoration: none;
      color: @fontColorOne;
    }
  }
</style>
